import { targetSubmit } from '@/services/api/api-analysis';
import { TinyArea } from '@ant-design/charts';
import { ClockCircleOutlined, EllipsisOutlined, SmallDashOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-card';
import { TableDropdown } from '@ant-design/pro-components';
import { useModel } from 'umi';
import { Divider, Dropdown, MenuProps, Radio, Skeleton, Space, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TargetTopicSubmitCardProps { }

const TargetTopicSubmitCard: React.FC<TargetTopicSubmitCardProps> = ({ }) => {
    const [dataTargetSubmit, setDataTargetSubmitState] =
        useState<AnalysisData.TargetSubmit>();
    const [loading, setLoading] = useState(false);
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};

    const [dataTabSelectDay, setDataTabSelectDayState] = useState<number>(60);

    const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        loadTargetSubmitData(60)
        setDataTabSelectDayState(60)
    };

    const handleMenuClick: MenuProps['onClick'] = (e) => {
        setLoading(true)
        loadTargetSubmitData(Number(e.key))
        setDataTabSelectDayState(Number(e.key))
    };

    const items: MenuProps['items'] = [
        {
            label: '7天',
            key: '7',
            icon: <ClockCircleOutlined />,
        },
        {
            label: '本月',
            key: ' ',
            icon: <ClockCircleOutlined />,
        },
        {
            label: '90天',
            key: '90',
            icon: <ClockCircleOutlined />,
        },
    ];

    const menuProps = {
        items,
        onClick: handleMenuClick,
    };

    /**
     * 宣传刊播
     * @param key
     */
    const loadTargetSubmitData = async (day: number) => {
        try {
            const response = await targetSubmit({ day: -day });
            if (response.code === 0) {
                setDataTargetSubmitState(response.data);
            }
            setLoading(false)
        } catch (error) { }
    };
    useEffect(() => {
        loadTargetSubmitData(dataTabSelectDay);
    }, []);

    return (
        <>
            {dataTargetSubmit ? (
                <Spin spinning={loading}>
                    <StatisticCard
                        title="线索报送"
                        extra={<>
                            {/* <Radio.Group options={options} value={dataTabSelectDay} onChange={(e) => {
                            setLoading(true)
                            loadTargetSubmitData(e.target.value)
                            setDataTabSelectDayState(e.target.value)
                        }} optionType="button" /> */}
                            <Dropdown.Button menu={menuProps} onClick={handleButtonClick} >
                                60天
                            </Dropdown.Button>
                            {/* <Radio.Group defaultValue="60" buttonStyle='outline' onChange={(e) => {
                                setLoading(true)
                                if (e.target.value === 0) {
                                    return
                                }
                                loadTargetSubmitData(e.target.value)
                                setDataTabSelectDayState(e.target.value)
                            }}>
                                <Radio.Button value="60">60天</Radio.Button>
                                <Radio.Button value="0">
                                    <TableDropdown
                                        key="menu"
                                        onSelect={(e) => {
                                            setLoading(true)
                                            loadTargetSubmitData(e)
                                            setDataTabSelectDayState(e)
                                        }}
                                        children={<><SmallDashOutlined /></>}
                                        menus={[
                                            {
                                                key: '7',
                                                name: '7天',
                                            },
                                            {
                                                key: '',
                                                name: '本月',
                                            },
                                            {
                                                key: '90',
                                                name: '90天',
                                            },
                                        ]
                                        }
                                    />
                                </Radio.Button>
                            </Radio.Group> */}
                        </>}

                        // statistic={{
                        //     value: `发布 ${dataTargetSubmit?.countSubmit}篇`,
                        // }}
                        style={{ backgroundColor: '#F6F7FB' }}
                        chart={
                            <>
                                <div >
                                    <h2 >线索 {dataTargetSubmit?.countSubmit} 篇</h2>
                                </div>
                                <TinyArea
                                    height={46}
                                    autoFit={true}
                                    smooth
                                    areaStyle={{
                                        fill: 'l(270) 0:rgb(151 95 228 / 10%) 0.5:rgb(151 95 228 / 60%) 1:rgb(151 95 228)',
                                    }}
                                    line={{
                                        color: '#975FE4',
                                    }}

                                    tooltip={{
                                        customContent: (x, data) => {
                                            if (x != null) {
                                                return `${dataTargetSubmit?.trendSubmits[x]?.label}: ${data[0].value}`;
                                            } else {
                                                return '';
                                            }
                                        },
                                    }}
                                    data={dataTargetSubmit?.trendSubmits.map((item) => item.value)}
                                // data={[0, 0, 0, 0, 31]}
                                />

                                <div >
                                    {/* <h2 >年报送线索 {dataTargetTotal?.countCues} 个</h2> */}
                                    {/* <h2 style={{ marginTop: 20 }}>年选题计划 {dataTargetTotal?.countTopic} 篇</h2> */}
                                </div>
                                <Divider />
                                <Space>
                                    <StatisticCard.Statistic
                                        title="周同比"
                                        value={Math.abs(dataTargetSubmit?.weekTrendCount) + ' '}
                                        trend={dataTargetSubmit?.weekTrendCount > 0 ? 'up' : 'down'}
                                    />
                                    <StatisticCard.Statistic
                                        title="月同比"
                                        value={Math.abs(dataTargetSubmit?.monthTrendCount) + ' '}
                                        trend={dataTargetSubmit.monthTrendCount > 0 ? 'up' : 'down'}
                                    />
                                </Space>
                            </>
                        }
                    /></Spin>
            ) : (
                <StatisticCard title="线索报送" extra={<EllipsisOutlined />}>
                    <Skeleton active />
                </StatisticCard>
            )}
        </>
    );
};

export default TargetTopicSubmitCard;
